<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <label style="margin-right: 5px">套餐名称：</label>
        <el-input
          v-model="name"
          placeholder="请输入套餐名称"
          style="width: 15%; margin-right: 10px"
        >
        </el-input>
        <label style="margin-right: 5px">套餐分类：</label>
        <el-select
          v-model="categoryId"
          slot="prepend"
          placeholder="请选择"
          style="width: 15%; margin-right: 15px"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <label style="margin-right: 10px">售卖状态：</label>
        <el-select
          v-model="status"
          slot="prepend"
          placeholder="请选择"
          style="width: 15%; margin-right: 15px"
        >
          <el-option
            v-for="item in statusArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          @click="pageQuery()"
          class="normal-btn"
          style="margin-right: 20px"
        >
          查询
        </el-button>
        <el-button
          type="text"
          @click="handleDeleteSetmeal('B')"
          style="margin: 0 10px 20px 0; color: #f56c6c"
        >
          批量删除
        </el-button>
        <el-button type="primary" @click="handleUpdataEmployee()">
          +添加套餐
        </el-button>

        <!-- 表格展示 -->
        <el-table
          :data="records"
          stripe
          class="tableBox"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="25px"> </el-table-column>
          <el-table-column
            prop="name"
            label="套餐名称"
            style="text-align: 'center'"
          >
          </el-table-column>
          <el-table-column prop="image" label="图片">
            <template slot-scope="scope">
              <el-image
                style="width: 80px; height: 40px; border: none"
                :src="scope.row.image"
                alt="string"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="categoryName" label="套餐分类">
          </el-table-column>
          <el-table-column prop="price" label="套餐价"> </el-table-column>
          <el-table-column prop="status" label="售卖状态">
            <template slot-scope="scope">
              <div
                class="tableColumn-status"
                :class="{ 'stop-use': scope.row.status === 0 }"
              >
                {{ scope.row.status === 0 ? '停售' : '启售' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="最后操作时间">
          </el-table-column>
          <el-table-column
            prop="opertion"
            label="操作"
            align="center"
            width="250px"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleDeleteSetmeal(scope.row)"
                type="text"
                style="color: #8ad0fb"
                >修改</el-button
              >
              <el-button
                @click="handleDeleteSetmeal('S', scope.row.id)"
                type="text"
                style="color: #f56c6c"
                >删除</el-button
              >
              <el-button
                @click="hangdleStartOrStop(scope.row)"
                type="text"
                :class="{
                  'enable-button': scope.row.status !== 1,
                  'disable-button': scope.row.status === 1,
                }"
              >
                {{ scope.row.status === 1 ? '停售' : '起售' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageList"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  getSetmealPage,
  enableOrDisableSetmeal,
  deleteSetmeal,
} from '@/api/setMeal'
import { getCategoryByType } from '@/api/category'
export default {
  //定义模型数据
  data() {
    return {
      name: '',
      page: '1',
      pageSize: '10',
      total: '',
      records: [],
      options: [
        {
          value: '选项一',
          label: '黄金糕',
        },
      ],
      categoryId: '',
      statusArr: [
        {
          value: '0',
          label: '停售',
        },
        {
          value: '1',
          label: '起售',
        },
      ],
      status: '', //售卖状态
      multipleSelection: '', //选中的数据
    }
  },
  //create vue生命周期函数 页面加载好之后就发出一次请求
  created() {
    const params = {
      page: this.page,
      pageSize: this.pageSize,
      status: this.status,
    }
    this.pageQuery()
    //查询分类框里面选项
    getCategoryByType({ type: 2 }).then((res) => {
      if (res.data.code === 1) {
        this.options = res.data.data
      }
    })
  },
  //进行方法绑定
  methods: {
    //分页查询
    pageQuery() {
      //封装分页查询json
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.name,
        status: this.status,
        categoryId: this.categoryId,
      }
      //发送ajax请求 访问后端服务，获取分页数据
      getSetmealPage(params)
        .then((res) => {
          if (res.data.code === 1) {
            this.records = res.data.data.records
            this.total = res.data.data.total
          }
        })
        .catch((err) => {
          this.$message.error('请求出错了' + err.message)
        })
    },
    //分页展示
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageQuery()
    },
    //分页条挑战功能实现
    handleCurrentChange(page) {
      this.page = page
      this.pageQuery()
    },
    //进行处理当前套餐起售停售
    hangdleStartOrStop(row) {
      this.$confirm('确认修改当前套餐状态吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const params = {
          id: row.id,
          status: row.status === 1 ? 0 : 1,
        }
        //调用方法
        enableOrDisableSetmeal(params).then((res) => {
          if (res.data.code === 1) {
            this.$message.success('套餐状态修改成功')
            this.pageQuery()
          } else {
            this.$message.error('套餐状态修改失败')
          }
        })
      })
    },
    //进行删除套餐
    handleDeleteSetmeal(type: string, id: string) {
      this.$confirm('确认删除当前指定套餐吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        //多选删除
        const arr = new Array()
        if (type === 'B') {
          var params = ''
          //进行遍历选中框得到套餐id进行拼接
          this.multipleSelection.forEach((element) => {
            arr.push(element.id)
          })
          params = arr.join(',')
        } else {
          // 单一删除
          params = id
        }
        deleteSetmeal(params).then((res) => {
          if (res.data.code === 1) {
            this.$message.success('删除成功')
            this.pageQuery()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
  },
}
</script>
<style lang="scss">
.el-table-column--selection .cell {
  padding-left: 10px;
}
</style>
<style lang="scss" scoped>
.enable-button {
  color: #41aafc; /* 或者任何你希望用于“启用”的颜色 */
}

.disable-button {
  color: #f56c6c; /* 或者任何你希望用于“禁用”的颜色 */
}
.dashboard {
  &-container {
    margin: 30px;

    .container {
      background: #fff;
      position: relative;
      z-index: 1;
      padding: 30px 28px;
      border-radius: 4px;

      .tableBar {
        margin-bottom: 20px;
        .tableLab {
          float: right;
          span {
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            padding: 0 20px;
            color: $gray-2;
          }
        }
      }

      .tableBox {
        width: 100%;
        border: 1px solid $gray-5;
        border-bottom: 0;
      }
      .pageList {
        text-align: center;
        margin-top: 30px;
      }
      //查询黑色按钮样式
      .normal-btn {
        background: #333333;
        color: white;
        margin-left: 20px;
        border: 1px solid #d8dde3;
      }
      .normal-btn:hover {
        background-color: #999999;
      }
    }
  }
}
</style>
